<template>
  <view>
    <view class="name-content">{{content[0] ?? '网络错误'}}</view>
    <view class="name-copy" @click="cv(content[0] ?? '网络错误')" :style="{ 'background-image': 'url(' + 
    'https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/loveName/result-but.png'
    + ')' }"></view> 
    <view class="full-name full-man">{{content[3] ?? '网络错误'}}</view>
    <view class="full-name full-woman">{{content[4] ?? '网络错误'}}</view>
    <view class="name-content-itam man">{{content[1] ?? '网络错误'}}</view>
    <view class="name-content-itam woman">{{content[2] ?? '网络错误'}}</view>

    <view @click="cv(content[1] ?? '网络错误')" class="copy man-copy">复制</view>
    <view @click="cv(content[2] ?? '网络错误')" class="copy woman-copy">复制</view>


    <view class="age" @click="reCommit">再测一次</view>

  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

const cv = (data:any)=>{
    uni.setClipboardData({
	data: data,
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
});
}

</script>

<style lang="scss" scoped>

    .full-name {
        position: absolute;
        top: 41.5%;
        width: 26%;
        left: 48%;
        text-align: center;
    }
    .full-woman{
        left: 15%;
    }
    .full-man{
        left: 58%; 
    }

   .name-content{
    position: absolute;
    top: 25%;
    width: 40%;
    left: 30%;
    text-align: center;
   }
   .name-copy{
    position: absolute;
    top: 30%;
      width: 40%;
      height: 80rpx;
      left: 30%;
      background-size: 100% 100%;
   }

   .name-content-itam{
    width: 200rpx;
    height: 100rpx;
    position: absolute;
    top: 49%;
    z-index: 10;
    border-radius: 20rpx;
    text-align: center;
    background: white;
    line-height: 100rpx;
   }
   .man{
    left: 15%;
    color: rgb(62,99,122);
   }
   .woman{
    left: 58%; 
    color: rgb(135,86,141);
   }

   .copy{
    width: 160rpx;
    height: 60rpx;
    position: absolute;
    top: 59%;
    z-index: 10;
    border-radius: 40rpx;
    text-align: center;
    color: white;
    line-height: 60rpx;
    font-weight: bold;
    font-size: 28rpx;
   }
   .man-copy{
    left: 17.5%;
    background: linear-gradient(to bottom, rgb(198,234,255), rgb(145,103,255));
   }
   .woman-copy{
    left: 60.5%;
    background: linear-gradient(to bottom, rgb(255,219,183), rgb(254,103,175)); 
   }

   .age{
        position: absolute;
        z-index: 99;
        top: 77%;
        height: 100rpx;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width: 42%;
        left: 29%;
        border-radius: 60rpx;
        background: linear-gradient(to bottom, rgb(198,234,255), rgb(145,103,255));
    }

</style>
